<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/Hui-iconfont/1.0.8/iconfont.min.css" />
<style type="text/css">
.row {
	margin-top: 15px
}
</style>
</head>
<body>
	<div class="panel panel-default">
		<div class="panel-body">
			<div class="row cl">
				<label class="form-label col-xs-2">票类型图片：</label>
				<div class="formControls col-xs-4">
					<c:if test="${ticketInfo.thumbImg != null && ticketInfo.thumbImg != ''}">
						<img src="${ticketInfo.thumbImg}" width="120px" height="50px" id="thumbImg"/> 
					</c:if>
					<c:if test="${ticketInfo.thumbImg == null || ticketInfo.thumbImg  == ''}">
						<img width="120px" height="50px" id="thumbImg"/> 
					</c:if>
					<span class="btn-upload form-group">
						<form id="imgForm" method="post" enctype="multipart/form-data">
							<input type="hidden" id="id" value="${ticketInfo.id}" /> 
							<input type="hidden" id="scenicSpotId" value="${scenicSpotId}"/> 
							<a href="javascript:void();" class="btn btn-primary upload-btn">
							 	<i class="Hui-iconfont">&#xe642;</i>
							 	<c:if test="${ticketInfo.thumbImg}">
									修改
								</c:if>
							 	<c:if test="${!ticketInfo.thumbImg}">
									上传
								</c:if>
							</a>
							 <input type="file" multiple name="imgFile" class="input-file" id="file1" />
						</form>
					</span>
				</div>
			</div>
			<form id="dataForm">
				<div class="row cl">
					<label class="form-label col-xs-2"><span class="c-red">*</span>票类型名称：</label>
					<div class="form-label col-xs-4">
						<input class="input-text required" type="text" value="${ticketInfo.name}" name="name" id="name"></input>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-2"><span class="c-red">*</span>票价格（元）：</label>
					<div class="formControls col-xs-4">
						<input class="input-text required" type="text" value="${ticketInfo.price / 100}" name="price" id="price"></input>
					</div>
					<label class="form-label col-xs-2"><span class="c-red">*</span>购票最少人数：</label>
					<div class="formControls col-xs-4">
						<input class="input-text required" type="text" value="${ticketInfo.minimumNumber}" name="minimumNumber" id="minimumNumber"></input>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-2"><span class="c-red">*</span>验票方式：</label>
					<div class="formControls col-xs-4">
						<span class="select-box inline">
							<select class="select required" id="verifyType" name="verifyType">
								<option value="">请选择验票方式</option>
								<option value="1">一票一刷</option>
								<option value="2">根据购票人数一票多刷</option>
								<option value="3">无限次刷</option>
							</select>
						</span>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-2">票说明：</label>
					<div class="formControls col-xs-8">
						<input class="input-text" type="text" value="${ticketInfo.descript}" id="descript" name="descript"></input>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-3"><span class="c-red">*</span>购票后有效期（天）：</label>
					<div class="formControls col-xs-4">
						<input class="input-text required" type="text" value="${ticketInfo.effectiveTime}" name="effectiveTime" id="effectiveTime"></input>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-2"><span class="c-red">*</span>儿童票折扣：</label>
					<div class="formControls col-xs-4">
						<input class="input-text required" type="text" value="${ticketInfo.childRate * 10}" id="childRate" name="childRate"></input>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-2"><span class="c-red">*</span>票销售时间：</label>
					<div class="formControls col-xs-3">
						<input readonly="readonly" type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'endTime\')}',minDate:'%y-{%M}-%d  00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss' })" id="startTime" name="startTime" class="input-text required Wdate" style="width:180px;">
					</div>
					<div class="formControls col-xs-4">-
						<input readonly="readonly" type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'startTime\')||\'%y-%M-%d %H:%m:%s\'}',dateFmt:'yyyy-MM-dd HH:mm:ss' })" id="endTime" name="endTime" class="input-text required Wdate" style="width:180px;">
					</div>
				</div>
				<div class="row cl" style="text-align: center">
					<button id="saveOrUpdate" class="btn btn-secondary radius size-L" type="button">保存</button>
					<button id="cancelBtn" class="btn btn-secondary radius size-L" type="button">取消</button>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="${ctx}/static/plug/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript">
		$(function() {
			var canSubmit = true;
			//初始化时间控件值
			var startTime = '${ticketInfo.startTimeStr}';
			var endTime = '${ticketInfo.endTimeStr}';
			if(startTime == null || startTime =='') {
				var date =  new Date();
				$("#startTime").val(date.format('yyyy-MM-dd 00:00:00'));
			} else {
				$("#startTime").val(startTime);
				if(endTime != null && endTime != '') {
					$("#endTime").val(endTime);
				}
			}
			//初始化下拉框
			var verifyType = '${ticketInfo.verifyType}';
			if(verifyType != null && verifyType !='') {
				$("#verifyType > option[value=" + verifyType + "]").attr("selected","selected");
			}
			
			$("#thumbImg").click(function() {
				var photosJson = new Object();
				var photoArray = new Array();
				var photo = new Object();
				photo.src = $(this).attr("src");
				photoArray[0] = photo;
				photosJson.data = photoArray;
				layer.photos({
					photos : photosJson
				});
			});

			$("#saveOrUpdate").click(function() {
				if(!$("#dataForm").valid()) {
					return;
				}
				if($("#price").val() <= 0){
					layer.msg("票价格格式不对，不能小于等于0");
					return;
				}
				if($("#minimumNumber").val() <= 0){
					layer.msg("购票最少人数格式不对，不能小于等于0");
					return;
				}
				if($("#effectiveTime").val() <= 0){
					layer.msg("购票后有效期格式不对，不能小于等于0");
					return;
				}
				if($("#childRate").val() <= 0){
					layer.msg("儿童票折扣格式不对，不能小于等于0");
					return;
				}
				console.log($("#dataForm").valid());
				
				if(canSubmit) {
					canSubmit = false;
					var id = $("#id").val();
					var tips = "";
					if(id == null || id == ''){
						tips = "新增";
					} else {
						tips = "修改";
					}
					
					var updateData = new Object();
					updateData.thumbImg = $("#thumbImg").attr("src");
					updateData.name = $("#name").val();
					
					updateData.price = $("#price").val() * 100;
					updateData.minimumNumber = $("#minimumNumber").val();
					updateData.verifyType = $("#verifyType").val();
					updateData.descript = $("#descript").val();
					updateData.effectiveTime = $("#effectiveTime").val();
					updateData.startTime = $("#startTime").val();
					updateData.endTime = $("#endTime").val();
					updateData.id = $("#id").val();
					updateData.childRate = $("#childRate").val() / 10;
					updateData.scenicSpotId = $("#scenicSpotId").val();
					$.post("${ctx}/ticketInfo/saveOrUpdate", updateData, function(data) {
						canSubmit = true;
						if (data.result) {
							layer.confirm(tips + '成功!', {
								btn : [ '确定' ]
							}, function() {
								var index = parent.layer.getFrameIndex(window.name);
								parent.reloadData();
								parent.layer.close(index);
							});
						} else {
							layer.confirm(tips + "失败!" + data.errorMsg, {
								btn : [ '确定' ]
							}, function() {
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							});
						}
					});
				}
			});

			$("#cancelBtn").click(function() {
				var index = parent.layer.getFrameIndex(window.name);
				parent.layer.close(index);
			});

			$("#file1").change(function() {
				$("#imgForm").attr("action","${ctx}/file/upload");
				$("#imgForm").attr("target","blankFrame");
				$("#imgForm").submit();
			});
		});

		function refreshUpload(img) {
			$("#thumbImg").attr("src",img);
		}
	</script>
	<iframe name="blankFrame" style="display: none"> </iframe>
</body>
</html>
